<template>
  <div class="box">
    <p>商户列表</p>
    <hr />

    <!-- 搜索框 -->
    <div class="serch-box">
      <el-input placeholder="用户名" v-model="input" clearable @change="search">
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogOpenuserVisible = true"
        >开户</el-button
      >
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index"> </el-table-column>
        <el-table-column
          show-overflow-tooltip
          v-for="item in tableLabel"
          align="center"
          :key="item.prop"
          :label="item.label"
          :sortable="item.prop == 'name' || item.prop == 'date' ? true : false"
          :sort-method="sort"
        >
          <template slot-scope="scope">
            <template v-if="item.prop == 'agency'">
              <span v-if="scope.row[item.prop] == '1'" style="color: lawngreen">
                代理
              </span>
              <span v-else-if="scope.row[item.prop] == '2'" style="color: blue">
                商户
              </span>
            </template>
            <template
              v-else-if="item.prop == 'account_status' || item.prop == 'state'"
            >
              <span v-if="scope.row[item.prop] == '1'" style="color: lawngreen">
                正常
              </span>
              <span v-else-if="scope.row[item.prop] == '2'" style="color: blue">
                冻结
              </span>
            </template>
            <template v-else-if="item.prop == 'online_status'">
              <div
                class="status"
                v-if="scope.row[item.prop] == '1'"
                style="color: lawngreen"
              >
                <div class="circlegreen"></div>
                <div>上线</div>
              </div>
              <div
                class="status"
                v-else-if="scope.row[item.prop] == '2'"
                style="color: blue"
              >
                <div class="circlegrey"></div>
                <div>下线</div>
              </div>
            </template>

            <span
              v-else-if="item.prop == 'create_date'"
              with="300"
              style="margin-left: 10px"
              >{{ $timer(scope.row[item.prop]) }}</span
            >
            <span v-else style="margin-left: 10px">{{
              scope.row[item.prop]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          width="180"
          label="操作"
          show-overflow-tooltip
          fixed="right"
        >
          <template slot-scope="scope">
            <el-dropdown
              size="mini"
              split-button
              type="primary"
              placement="bottom-start"
              @command="handleClick(scope.row, $event)"
            >
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-edit" command="edit" divided
                  >修改</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-delete" command="del" divided
                  >删除</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-delete"
                  command="MD5change"
                  divided
                  >重置md5密钥</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-turn-off"
                  command="loginPass"
                  divided
                  >重置登录密码</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-circle-plus-outline"
                  command="addMoney"
                  divided
                  >上分</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-remove-outline"
                  command="drowMoney"
                  divided
                  >下分</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 页码 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="config.total"
      :current-page.sync="config.currentPage"
      @size-change="handleSizeChange"
      @current-change="changePage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="config.pageSize"
    >
    </el-pagination>

    <!-- 开户弹窗 -->
    <el-dialog
      title="基本信息"
      :visible.sync="dialogOpenuserVisible"
      width="1000px"
    >
      <el-form
        :model="openRuleForm"
        :rules="rules"
        ref="openRuleForm"
        label-width="100px"
        inline
      >
        <el-form-item label="上级代理" label-width="100px">
          <el-input placeholder="平台" style="width: 750px"> </el-input>
        </el-form-item>
        <el-form-item label="用户名" required>
          <el-input
            v-model="openRuleForm.name"
            style="width: 600px"
            @blur="checkNameFuc"
          ></el-input>
          <el-button
            v-if="chekname"
            type="success"
            style="margin-left: 10px"
            icon="el-icon-check"
            >可用</el-button
          >
          <!-- <el-button
            v-else-if="chekname =='3'"
            type="danger"
            style="margin-left: 10px"
            icon="el-icon-close"
            >此名称不可用</el-button
          > -->
          <el-button v-else type="info" style="margin-left: 10px"
            >检查是否可用</el-button
          >
        </el-form-item>
        <el-form-item label="商户名称" prop="merchant_name">
          <el-input
            v-model="openRuleForm.merchant_name"
            style="width: 750px"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="account">
          <el-input
            v-model="openRuleForm.account"
            style="width: 750px"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡商" prop="region">
          <el-select
            v-model="openRuleForm.region"
            placeholder="请选择"
            style="width: 750px"
            disabled
          >
          </el-select>
        </el-form-item>
        <el-form-item style="display: flex">
          <el-form-item label="登录密码" prop="pass">
            <el-input
              style="width: 300px"
              type="password"
              v-model="openRuleForm.pass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item
            label="重复登录密码"
            prop="password"
            label-width="130px"
          >
            <el-input
              style="width: 300px"
              type="password"
              v-model="openRuleForm.password"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="充值费率(%)" prop="name" label-width="130px">
          <el-input placeholder="0.00" style="width: 720px" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号状态:" style="width: 800px">
          <el-radio v-model="openRuleForm.account_status" label="1"
            >正常</el-radio
          >
          <el-radio v-model="openRuleForm.account_status" label="2"
            >冻结</el-radio
          >
        </el-form-item>
        <el-form-item label="代付状态:" style="width: 400px">
          <el-radio v-model="openRuleForm.state" label="1">正常</el-radio>
          <el-radio v-model="openRuleForm.state" label="2">冻结</el-radio>
        </el-form-item>
        <el-form-item label="代理权限:" style="width: 400px">
          <el-radio v-model="openRuleForm.proxy_access" label="2"
            >关闭</el-radio
          >
          <el-radio v-model="openRuleForm.proxy_access" label="1"
            >启用</el-radio
          >
        </el-form-item>
        <el-form-item style="display: flex; justify-content: center">
          <el-button type="primary" @click="submitForm('openRuleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('openRuleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog
      title="编辑商户"
      :visible.sync="dialogEditVisible"
      width="1000px"
    >
      <el-form
        :model="tableRow"
        :rules="rules"
        ref="tableRow"
        label-width="100px"
        inline
      >
        <el-form-item label="上级用户" label-width="100px">
          <el-select
            v-model="tableRow.superior_user"
            disabled
            style="width: 750px"
          >
            <el-option label="test" value="test"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="tableRow.name"
            disabled
            style="width: 320px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商户名称" prop="sysUserName">
          <el-input
            v-model="tableRow.merchant_name"
            style="width: 320px"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡商" prop="region">
          <el-select v-model="tableRow.region" style="width: 750px" disabled>
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风控金额" prop="name" label-width="130px">
          <el-input placeholder="0.00" style="width: 720px" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单冻结金额(元)" prop="name" label-width="130px">
          <el-input
            v-model="tableRow.order_freeze"
            placeholder="0.00"
            style="width: 720px"
          ></el-input>
        </el-form-item>
        <el-form-item label="充值费率(%)" prop="name" label-width="130px">
          <el-input
            placeholder="0.00%"
            style="width: 720px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="账号状态:" style="width: 800px">
          <el-radio v-model="tableRow.account_status" :label="1">正常</el-radio>
          <el-radio v-model="tableRow.account_status" :label="2">冻结</el-radio>
        </el-form-item>
        <el-form-item label="代付状态:" style="width: 400px">
          <el-radio v-model="tableRow.state" :label="1">正常</el-radio>
          <el-radio v-model="tableRow.state" :label="2">冻结</el-radio>
        </el-form-item>
        <el-form-item label="代理权限:" style="width: 400px">
          <el-radio v-model="tableRow.proxy_access" :label="2">关闭</el-radio>
          <el-radio v-model="tableRow.proxy_access" :label="1">启用</el-radio>
        </el-form-item>
        <el-form-item label="MD5密匙" label-width="130px">
          <el-input
            v-model="tableRow.md5_secret"
            style="width: 720px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item style="display: flex; justify-content: center">
          <el-button type="primary" @click="submitForm('tableRow')"
            >提交</el-button
          >
          <el-button @click="resetForm('tableRow')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="dialogPassVisible" width="500px">
      <el-form :model="changePass" :rules="rules" ref="changePass">
        <el-form-item label="登录密码" prop="pass" label-width="130px">
          <el-input
            type="password"
            v-model="changePass.pass"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="重复登录密码" prop="checkPass" label-width="130px">
          <el-input
            type="password"
            v-model="changePass.checkPass"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item style="display: flex; justify-content: center">
          <el-button type="primary" @click="submitForm('changePass')"
            >提交</el-button
          >
          <el-button @click="resetForm('changePass')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 上分弹窗 -->
    <el-dialog title="上分" :visible.sync="dialogRechargeVisible" width="500px">
      <el-form :model="ruleFormMoney" :rules="rules" ref="ruleFormMoney">
        <el-form-item label="新资金:" label-width="130px">
          <el-radio v-model="ruleFormMoney.handling_charge_switch" label="1"
            >否</el-radio
          >
          <el-radio v-model="ruleFormMoney.handling_charge_switch" label="2"
            >是</el-radio
          >
        </el-form-item>
        <el-form-item label-width="130px">
          新资金时，将扣除对应手续费
        </el-form-item>
        <el-form-item label="充值金额" prop="amount" label-width="130px">
          <el-input
            v-model="ruleFormMoney.amount"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认充值金额"
          prop="top_up_amount"
          required
          label-width="130px"
        >
          <el-input
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            v-model="ruleFormMoney.top_up_amount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style="display: flex; justify-content: center">
          <el-button type="primary" @click="submitForm('ruleFormMoney')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleFormMoney')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 下分弹窗 -->
    <el-dialog title="下分" :visible.sync="dialogUpVisible" width="500px">
      <el-form :model="DeductionMoney" :rules="rules" ref="DeductionMoney">
        <el-form-item label="扣除金额" prop="variable" label-width="130px"
          >-
          <el-input
            v-model="DeductionMoney.variable"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认扣除金额"
          prop="variable_amount"
          required
          label-width="130px"
          >-
          <el-input
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            v-model="DeductionMoney.variable_amount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item style="display: flex; justify-content: center">
          <el-button type="primary" @click="submitForm('DeductionMoney')"
            >提交</el-button
          >
          <el-button @click="resetForm('DeductionMoney')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //开户密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.openRuleForm.password !== "") {
          this.$refs.openRuleForm.validateField("password");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.openRuleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //重置密码
    var openvalidatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.changePass.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //充值对比
    var validateAddMoney = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认充值金额"));
      } else if (value !== this.ruleFormMoney.amount) {
        callback(new Error("两次输入金额不一致!"));
      } else {
        callback();
      }
    };
    //扣款对比
    var DeductionMoneyMoney = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认扣除金额"));
      } else if (value !== this.DeductionMoney.variable) {
        callback(new Error("两次输入金额不一致!"));
      } else {
        callback();
      }
    };
    //检查用户名是否可用
    // var cehckName = () => {
    //   if (this.chekname == false) {
    //     this.$message({
    //       type: "info",
    //       message: "请检查用户名是否可用",
    //     });
    //   }
    // };
    return {
      input: "",
      serchid: "",
      serchName: "",
      tableLabel: [
        {
          prop: "name",
          label: "用户名",
        },
        {
          prop: "id",
          label: "商户号",
        },
        {
          prop: "merchant_name",
          label: "商户名称",
        },
        {
          prop: "agency",
          label: "是否代理",
        },
        {
          prop: "merchant_total_balance",
          label: "总金额",
        },
        {
          prop: "merchant_use_balance",
          label: "可用余额",
        },
        {
          prop: "order_freeze",
          label: "订单冻结金额",
        },
        {
          prop: "account_status",
          label: "账号状态",
        },
        {
          prop: "online_status",
          label: "在线状态",
        },
        {
          prop: "state",
          label: "代付状态",
        },
        {
          prop: "md5_secret",
          label: "MD5 secret",
        },
        {
          prop: "create_date",
          label: "开户时间",
        },
      ],
      tableData: [
        {
          id: "03",
          merchant_name: "买牙刷",
          merchant_total_balance: 5000,
          merchant_use_balance: 5000,
          order_freeze: 600,
          state: "1",
          zxzt: "1",
        },
      ],

      dialogOpenuserVisible: false, //开户
      dialogEditVisible: false, //修改
      dialogPassVisible: false, //重置密码
      dialogRechargeVisible: false, //上分
      dialogUpVisible: false, //下分
      tableRow: [], //表格信息缓存
      changeUser: {
        //编辑用户
        id: "", //传入
        user_id: "", //传入
        superior_user: "", //上级用户
        name: "", //用户名
        merchant_name: "", //商户名称
        order_freeze: "", //冻结金额
        account_status: "1", //账号状态
        state: "1", //代付状态
        proxy_access: "2", //代理权限
        md_secret: "", //md5
        merchant_total_balance: "", //
      },
      openRuleForm: {
        //开户弹窗数据
        superior_user: "test", //上级代理
        name: "", //用户名
        merchant_name: "", //商户名称
        account: "", //登录账号
        pass: "", //密码
        password: "", //确认密码
        state: "1", //代付状态
        account_status: "1", //账号状态
        proxy_access: "2", //代理权限
      },
      chekname: false, //用户名是否可用判断
      changePass: {
        //重置密码
        pass: "",
        checkPass: "",
      },
      ruleFormMoney: {
        //上分
        handling_charge_switch: "1",
        amount: "",
        top_up_amount: "",
      },
      DeductionMoney: {
        //下分
        variable: "",
        variable_amount: "",
      },
      config: {
        currentPage: 1,
        pageSize: 10,
        total: 1000,
      },
      rules: {
        superiorUser: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        merchant_name: [
          { required: true, message: "请输入商户名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        account: [
          { required: true, message: "请输入正确账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        password: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        checkPass: [
          { required: true, validator: openvalidatePass2, trigger: "blur" },
        ],
        amount: [
          //上分
          {
            required: true,
            message: "必填且必须为数字,不能为负",
            trigger: "blur",
            validator: validateAddMoney,
          },
        ],
        top_up_amount: [
          //上分判断
          { required: true, validator: validateAddMoney, trigger: "blur" },
        ],
        variable: [
          //下分
          {
            required: true,
            message: "必填且必须为数字,不能为负",
            trigger: "blur",
          },
        ],
        variable_amount: [
          //下分判断
          { required: true, validator: DeductionMoneyMoney, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.gitTable();
  },
  methods: {
    //请求数据列表
    gitTable() {
      this.$axios({
        url: "/system/admin/mm/merchantlist/queryMerchants",
        method: "GET",
        params: this.config,
      })
        .then((res) => {
          console.log("后端返回", res);
          // this.sendData = [...res.data.data];
          this.selectData([...res.data.data]);
          this.config.total = res.data.count;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectData(tableData) {
      //筛选对象
      for (var i = 0; i < tableData.length; i++) {
        for (let key in tableData[i].sysUser) {
          tableData[i][key] = tableData[i].sysUser[key]; //加进去 [key] 属性为变量
        }
      }
      this.tableData = tableData;
      //console.log(tableData);
    },
    //请求数据
    sort(a, b) {
      //排序
      return a - b;
    },
    search() {
      this.serchName = this.input;
      //商户查询
      if (this.input === "") {
        return this.gitTable();
      } else {
        this.$axios({
          url: "/system/admin/mm/merchantlist/searchMerchants",
          method: "GET",
          params: {
            currentPage: this.config.currentPage,
            name: this.serchName,
            pageSize: this.config.pageSize,
          },
        })
          .then((res) => {
            this.selectData([...res.data.data]);
            console.log("搜索用户名:", res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    handleClick(row, event) {
      this.tableRow = row;
      switch (event) {
        case "edit": //修改
          return (this.dialogEditVisible = true);
        case "del":
          return this.delete(row);
        case "MD5change":
          return this.MD5change(row);
        case "loginPass":
          // this.loginPass();
          return (this.dialogPassVisible = true);
        case "addMoney":
          //上分按钮
          return (this.dialogRechargeVisible = true);
        case "drowMoney":
          return (this.dialogUpVisible = true);
      }
      console.log(row, event);
    },

    submitForm(formName) {
      //提交按钮
      this.$refs[formName].validate((valid) => {
        console.log(formName);
        if (valid) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.dialogOpenuserVisible = false; //开户
          this.dialogEditVisible = false; //修改
          this.dialogPassVisible = false; //重置密码
          this.dialogRechargeVisible = false; //上分
          this.dialogUpVisible = false; //下分
          switch (formName) {
            case "openRuleForm": //开户提交
              return this.openRuleFormFuc(formName);
            case "tableRow": //编辑用户
              return this.editTableRow(formName);
            case "changePass": //修改密码
              return this.passChange(formName);
            case "ruleFormMoney": //上分
              return this.addMoney(formName);
            case "DeductionMoney": //下分
              return this.reduceMoney(formName);
          }
        } else {
          this.$message("请填写完表单!");
          return false;
        }
        //清空
        this.$refs[formName].resetFields();
      });
    },
    resetForm(formName) {
      this.chekname = false;
      (this.dialogEditVisible = false), //修改
        (this.dialogPassVisible = false), //重置密码
        (this.dialogRechargeVisible = false), //上分this.
        (this.dialogUpVisible = false), //下分
        //取消按钮
        this.$refs[formName].resetFields();
    },

    openRuleFormFuc(formName) {
      //开户请求
      //var tmp = Object.assign(this.tableRow, this.openRuleForm); //拼接
      this.$axios({
        url: "system/admin/mm/merchantlist/addMerchants",
        method: "POST",
        data: this.openRuleForm,
      })
        .then((res) => {
          console.log('开户',res);
          if (res.data.code === "200") {
            this.$message({
              type: "success",
              message: "开户成功!",
            });
          } else {
            this.$message({
              type: "info",
              message: "开户失败!",
            });
          }
          this.gitTable();
          //取消按钮
          this.$refs[formName].resetFields();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    editTableRow(formName) {
      //编辑商户
      var tmp = Object.assign(this.tableRow); //对象拼接
      this.$axios({
        url: "/system/admin/mm/merchantlist/updateMerchantsById",
        method: "POST",
        data: {
          id: tmp.id, //传入
          user_id: tmp.id, //传入
          superior_user: tmp.superior_user, //上级用户
          name: tmp.name, //用户名
          merchant_name: tmp.merchant_name, //商户名称
          order_freeze: tmp.order_freeze, //冻结金额
          account_status: tmp.account_status, //账号状态
          state: tmp.state, //代付状态
          proxy_access: tmp.proxy_access, //代理权限
          md_secret: tmp.md_secret, //md5
          merchant_total_balance: tmp.merchant_total_balance,
        },
      })
        .then((res) => {
          if (res.data.code === "200") {
            this.$message({
              type: "success",
              message: "编辑成功!",
            });
            this.gitTable();
          }
          this.$refs[formName].resetFields();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    checkNameFuc() {
      //检查用户名
      this.$axios({
        url: "system/admin/mm/merchantlist/checkName",
        method: "GET",
        params: {
          name: this.openRuleForm.name,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.chekname = true;
          } else {
            this.$message({
              message: "该用户名不可用",
              type: "info",
            });
            this.chekname = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    passChange(formName) {
      //重置密码
      console.log(this.tableRow.user_id);
      this.$axios({
        url: "/system/admin/mm/merchantlist/resetMerchantsPwd",
        method: "POST",
        data: {
          user_id: this.tableRow.user_id,
          password: this.changePass.checkPass,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "重置密码成功!",
            });
          }

          this.$refs[formName].resetFields();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addMoney(formName) {
      //上分
      var tmp = Object.assign(this.tableRow, this.ruleFormMoney); //拼接
      this.$axios({
        url: "/system/admin/mm/merchantlist/addMoney",
        method: "POST",
        data: {
          id: tmp.id,
          account: tmp.account,
          merchant_name: tmp.merchant_name,
          merchant_total_balance: tmp.merchant_total_balance,
          handling_charge_switch: tmp.handling_charge_switch,
          top_up_amount: tmp.top_up_amount,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: "success",
              message: "充值成功!",
            });
            this.gitTable();
          }
          this.$refs[formName].resetFields();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reduceMoney(formName) {
      //下分
      var tmp = Object.assign(this.tableRow, this.DeductionMoney); //拼接
      this.$axios({
        url: "/system/admin/mm/merchantlist/reduceMoney",
        method: "POST",
        data: {
          id: tmp.id,
          account: tmp.account,
          merchant_name: tmp.merchant_name,
          merchant_total_balance: tmp.merchant_total_balance,
          variable_amount: tmp.variable_amount,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: "sucess",
              message: "下分成功!",
            });

            this.gitTable();
          }
          this.$refs[formName].resetFields();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    delete(row) {
      //删除
      console.log(row.id);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios({
            url: "/system/admin/mm/merchantlist/delMerchantsById",
            method: "POST",
            data: { id: row.id },
          })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  type: "success",
                  message: "删除数据成功!",
                });
                this.gitTable();
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    MD5change(row) {
      //重置md5
      console.log(row.id);
      this.$confirm("此操作将重置md5密钥, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios({
            url: "/system/admin/mm/merchantlist/resetmd5",
            method: "POST",
            data: { id: row.id },
          })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  type: "success",
                  message: "重置md5密钥成功!",
                });
                this.gitTable();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    changePage(page) {
      //点击页码
      this.config.currentPage = page;
      this.gitTable();
    },
    handleSizeChange(val) {
      //点击每页展示
      console.log(val);
    },
  },
};
</script>
<style scoped>
.el-dropdown {
  width: 80px;
  height: 50px;
}
.serch-box {
  width: 100%;
  height: 100%;
  display: flex;
}
.el-input {
  width: 200px;
  margin-right: 10px;
  margin-right: 10px;
}
.table {
  margin-top: 20px;
}
.box {
  padding: 15px;
  background-color: white;
}
.circlegreen,
.circlegrey {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: grey;
  border-radius: 50%;
}
.circlegreen {
  background-color: green;
}
.status {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
